<template>
	<section>
		<!-- 更新/详情 -->
		<el-form v-if="type==='update' || type==='detail'" ref="form" :model="form" label-width="120px">
			<el-form-item label="数据源名称">
				<el-input v-if="type==='update'" v-model="formData.name"></el-input>
				<span v-if="type==='detail'">{{formData.name}}</span>
			</el-form-item>
			<el-form-item
				v-show="item.type==='select'&& item.modelData!=='libraryTypeId' || item.show=== dbType "
				:label="item.label"
				v-for="(item,index) in formLabel"
				:key="index"
				v-if="type!='detail'"
			>
				<!-- 所属网段 -->
				<el-select
					v-if="item.type==='select' && item.modelData==='segmentId'"
					v-model="formData.segmentId"
					@change="emitSelectWangduan"
				>
					<el-option
						v-for="optionsItem in item.options"
						:key="optionsItem.id"
						:label="optionsItem.name"
						:value="optionsItem.id"
					></el-option>
				</el-select>
				<!-- 所属区域-->
				<el-select
					v-if="item.type==='select' && item.modelData!='segmentId'  && item.modelData!='typeId' && item.modelData!='libraryTypeId'"
					v-model="formData.areaId"
				>
					<el-option
						v-for="optionsItem in item.options"
						:key="optionsItem.id"
						:label="optionsItem.name"
						:value="optionsItem.id"
					></el-option>
				</el-select>
				<!-- 类型 -->
				<el-select
					v-if="item.type==='select' && item.modelData==='typeId'"
					v-model="formData.typeId"
					@change="emitSelectType"
				>
					<el-option
						v-for="optionsItem in item.options"
						:key="optionsItem.id"
						:label="optionsItem.name"
						:value="optionsItem.id"
					></el-option>
				</el-select>
				<!-- 数据库类型 -->
				<el-select
					v-if="item.show==='db'&&item.type==='select' && item.modelData==='libraryTypeId'"
					v-model="formData.libraryTypeId"
					@change="emitSelectType"
				>
					<el-option
						v-for="optionsItem in item.options"
						:key="optionsItem.id"
						:label="optionsItem.name"
						:value="optionsItem.id"
					></el-option>
				</el-select>
				<!-- 数据库地址 -->
				<el-input
					v-if="item.type==='input'&&item.modelData==='address'"
					v-model="formData.address"
					:placeholder="item.placehold"
				></el-input>
				<!-- 数据库名称 -->
				<el-input
					v-if="item.type==='input'&&item.modelData==='dataBaseName'"
					v-model="formData.dataBaseName"
					:placeholder="item.placehold"
				></el-input>
				<!-- 文件目录 -->
				<el-input
					v-if="item.type==='input'&&item.modelData==='filePath'"
					v-model="formData.filePath"
					:placeholder="item.placehold"
				></el-input>
				<!-- 端口号 -->
				<el-input
					v-if="item.type==='input'&&item.modelData==='port'"
					v-model="formData.port"
					:placeholder="item.placehold"
				></el-input>
			</el-form-item>
			<el-form-item v-if="type==='update'" label="用户名">
				<el-input v-model="formData.username"></el-input>
				<!-- <span v-if="type==='detail'">{{formData.username}}</span> -->
			</el-form-item>
			<el-form-item v-if="type==='update'" label="密码">
				<el-input v-model="formData.password"></el-input>
				<!-- <span v-if="type==='detail'">{{formData.password}}</span> -->
			</el-form-item>
			<!-- 详情显示 -->
			<el-form-item v-if="type==='detail'" label="类型">
				<span v-if="formData.typeId===3">数据库</span>
				<span v-if="formData.typeId===2">ftp</span>
			</el-form-item>
			<el-form-item v-if="type==='detail'" label="所属区域">
				<span>{{formData.areaId}}</span>
			</el-form-item>
			<el-form-item v-if="type==='detail'" label="数据库类型">
				<span>{{formData.libraryTypeId}}</span>
			</el-form-item>
			<el-form-item v-if="type==='detail'" label="数据库版本">
				<span>{{formData.dataSourceVersion}}</span>
			</el-form-item>
			<el-form-item v-if="type==='detail'" label="数据库地址">
				<span>{{formData.address}}</span>
			</el-form-item>
			<el-form-item v-if="type==='detail'" label="数据库名称">
				<span>{{formData.dataBaseName}}</span>
			</el-form-item>
			<el-form-item label="描述">
				<el-input v-if="type==='update'" type="textarea" v-model="formData.describe"></el-input>
				<span v-if="type==='detail'">{{formData.describe}}</span>
			</el-form-item>
			<span class="ceshi">
				<i>测试联通性</i>
				<span v-if="type ==='update'">测试结果</span>
				<span v-if="type ==='detail'">{{formData.isConn ===0?'链接不通':'链接成功'}}</span>
			</span>
			<el-form-item>
				<el-button v-if="type!='detail'" type="primary" @click="onSubmit">确定</el-button>
				<el-button v-if="type!='detail'" @click="$emit('closeForm')">取消</el-button>
			</el-form-item>
		</el-form>
		<!-- 新增 -->
		<el-form v-if="type==='add'" ref="form" :model="form" label-width="120px">
			<el-form-item
				v-show="item.show==='normal' || item.show=== dbType"
				:label="item.label"
				v-for="(item,index) in formLabel"
				:key="index"
				v-if="type!='detail'"
			>
				<el-input
					v-if="item.type==='input'"
					v-model="form[item.modelData]"
					:placeholder="item.placehold"
				></el-input>
				<el-select
					v-if="item.type==='select' && item.modelData!='segmentId'  && item.modelData!='typeId'"
					v-model="form[item.modelData]"
				>
					<el-option
						v-for="optionsItem in item.options"
						:key="optionsItem.value"
						:label="optionsItem.name"
						:value="optionsItem.id"
					></el-option>
				</el-select>
				<el-select
					v-if="item.type==='select' && item.modelData==='segmentId'"
					v-model="form[item.modelData]"
					@change="emitSelectWangduan"
				>
					<el-option
						v-for="optionsItem in item.options"
						:key="optionsItem.value"
						:label="optionsItem.name"
						:value="optionsItem.id"
					></el-option>
				</el-select>
				<el-select
					v-if="item.type==='select' && item.modelData==='typeId'"
					v-model="form[item.modelData]"
					@change="emitSelectType"
				>
					<el-option
						v-for="optionsItem in item.options"
						:key="optionsItem.value"
						:label="optionsItem.name"
						:value="optionsItem.id"
					></el-option>
				</el-select>
				<el-input v-if="item.type==='textarea'" type="textarea" v-model="form[item.modelData]"></el-input>
			</el-form-item>
			<span class="ceshi" v-if="type!='detail'">
				<i>测试联通性</i>测试结果
			</span>
			<el-form-item v-if="type!='detail'">
				<el-button type="primary" @click="onSubmit">确定</el-button>
				<el-button @click="$emit('closeForm')">取消</el-button>
			</el-form-item>
			<!-- <el-form-item  :label="item.label+'：'"  v-for="(item,index) in formData"  v-if="type==='detail'" :key="index">
			        	{{item.value}}
			</el-form-item>-->
		</el-form>
	</section>
</template>

<script>
export default {
  props: {
    type: "",
    content: "",
    formLabel: Array,
    formData: Object
  },
  data() {
    return {
      form: {},
      dbType: ""
    };
  },
  methods: {
    onSubmit() {
      // this.$emit("insertData", this.form);
      // this.form = {};
      if (this.type === "add") {
        this.$emit("insertData", this.form);
        //清空上条数据
        this.form = {};
      } else if (this.type === "update") {
        this.$emit("insertData", this.formData);
      }
    },
    emitSelectWangduan(val) {
      this.$emit("emitSelectWangduan", val);
    },
    emitSelectType(val) {
      // if (val === 1) {
      if (val === 3) {
        this.dbType = "db";
      } else if (val === 2) {
        this.dbType = "ftp";
      }
      //this.$emit('emitSelectType',val)
    }
  },
  watch: {
    type(newVal) {
      console.log(newVal);
    },
    //获取下拉框值
    formData() {
      this.emitSelectType(this.formData.typeId);
    }
  }
};
</script>

<style scoped="scoped">
.ceshi i {
  margin: 0 17px 0 15px;
  display: inline-block;
  width: 110px;
  background: #5a8bff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 30px;
  color: #fff;
  margin-bottom: 15px;
}
</style>